<html>
<head>
    <meta charset="UTF-8">
    <title>查询所有用户信息</title>
    <style>
        table {
            border-collapse: collapse;
            width: 80%;
            margin: 20px auto;
        }
        th, td {
            border: 1px solid #ccc;
            padding: 10px;
            text-align: center;
        }
        #download-btn {
            position: absolute;
            top: 20px;
            right: 20px;
            padding: 10px 20px;
            background-color: green;
            color: white;
            border: none;
            cursor: pointer;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // 发送请求获取所有用户信息
            $.ajax({
                url: "http://localhost:8080/stadium/admin/getAllUserInf",
                type: "GET",
                dataType: "json",
                success: function(data) {
                    // 如果成功，将数据展示在表格中
                    var table = $("#user-table");
                    for (var i = 0; i < data.length; i++) {
                        var user = data[i];
                        var tr = $("<tr></tr>");
                        tr.append($("<td></td>").text(user.id));
                        tr.append($("<td></td>").text(user.userAccount));
                        tr.append($("<td></td>").text(user.userPassword));
                        tr.append($("<td></td>").text(user.avatarUrl));
                        tr.append($("<td></td>").text(user.gender));
                        tr.append($("<td></td>").text(user.age));
                        tr.append($("<td></td>").text(user.phone));
                        tr.append($("<td></td>").text(user.email));
                        tr.append($("<td></td>").text(user.userRole));
                        tr.append($("<td></td>").text(user.createTime));
                        tr.append($("<td></td>").text(user.updateTime));
                        tr.append($("<td></td>").text(user.isDelete));
                        table.append(tr);
                    }
                },
                error: function(xhr, status, error) {
                    // 如果失败，显示错误信息
                    alert("请求失败：" + error);
                }
            });
        });

        // 给下载按钮绑定点击事件，发送请求下载所有用户信息
        function download(){
            $.ajax({
                url: "http://localhost:8080/stadium/admin/DownLoadAllUsers",
                method: "GET",
                xhrFields: {
                    responseType: 'blob'
                },
                success: function(data) {
                    var a = document.createElement('a');
                    var url = window.URL.createObjectURL(data);
                    console.log(url)
                    a.href = url;
                    a.download = "users.csv";
                    document.body.append(a);
                    a.click();
                    window.URL.revokeObjectURL(url);
                    $(a).remove();
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log("Error:", errorThrown);
                }
            });
        }
    </script>
</head>
<body>
<h1 style="text-align: center">查询所有用户信息</h1>
<button type="button" onclick="download()">下载所有用户信息</button>
<!--<button id="result">下载所有用户信息</button>-->
<table id="user-table">
    <tr>
        <th>id</th>
        <th>userAccount</th>
        <th>userPassword</th>
        <th>avatarUrl</th>
        <th>gender</th>
        <th>age</th>
        <th>phone</th>
        <th>email</th>
        <th>userRole</th>
        <th>createTime</th>
        <th>updateTime</th>
        <th>isDelete</th>
    </tr>
</table>
</body>
</html>

